<template>
  <div class="bg">
    <nav-com
      :title="$t('zhuxiao')"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="top-view1">
      <van-row  class="m-b-10 m-t-10 topContent">
        <van-col span="24" class="fontStyle">{{ $t('zhuxiao') }}</van-col>
      </van-row>
      <van-cell-group inset class="m-b-10">
        <van-field
          :disabled="true"
          v-model="fatValue"
          label=""
          input-align="left"
        />
      </van-cell-group>
      <div class="m-b-10 getcodecontent">
        <input type="text" class="narmol-text" :placeholder="$t('getcodeplace')"  v-model="fatValuecode"/>
        <div class="getcodes" @click="getyanzhengma()">{{$t('getcode')}}</div>
      </div>
      <div  class='fatSubmit'>
        <van-button round type="info" class="fatSubmit_yanse" block @click="submintname()">{{ $t('zhuxiaobtn') }}</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import navCom from '@/components/nav-com.vue'
import { emsSend, logcancellation, profile } from '../../api/user'
export default {
  name: 'nickName',
  components: {
    navCom
  },
  data () {
    return {
      showView: true,
      fatValue: '',
      fatValuecode: '',
      title: '注销账号'
    }
  },
  mounted () {
    this.fatValue = this.$route.query.canshu
    console.log('=this.$route.query.canshu', this.$route.query.canshu)
    this.init()
  },
  methods: {
    // 返回
    backHandler () {
      this.$router.go(-1)
    },
    // 初始化
    init () {

    },
    getyanzhengma () {
      emsSend({ email: this.fatValue, event: 'cancellation' }).then((res) => {
        if (res.code == 1) {
          this.$toast(res.msg)
        }
      })
    },
    submintname () {
      logcancellation({ code: this.fatValuecode }).then((res) => {
        if (res.code == 1) {
          this.$toast(res.msg)
          // setTimeout(()=>{
          this.loginout()
          // },500)
        }
      })
    },
    loginout () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.loginOut()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('loginOut', {}, res => {})
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.top-view1{
  margin-top: 26.23vw;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 10px;
}
.topContent{
  margin: 0.8rem 0.42667rem 10px;
}
.fontStyle{
  font-size: 18px;
  font-family:PingFang, PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color:#303030
}
.fontStyle_te{
  font-size: 18px;
  font-family:PingFang, PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #808080;
}
.fatSubmit{
  padding: 0.3rem 0.42667rem 10px;
  margin-top: 15px;
  .fatSubmit_yanse{
    border: 0px!important;
    font-size: 18px!important;
    font-weight: 600;
    background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
    box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
  }

}
.getcodecontent{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 15px;
  height: 45px;
  .narmol-text{
    border: 0;
    height: 100%;
    font-size: 14px;
    padding:0 10px;
    border-radius: 8px;
    width: 60%;
  }
  .getcodes{
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff;
    padding: 0 15px;
    font-size: 14px!important;
    background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
    box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
  }
}
::v-deep .van-cell{
  font-size:20px!important;
}
</style>
